<template>
  <div class="w-full bg-[#eee] text-16px">
    <div class="w-full bg-white">
      <div class="w-full relative bg-white bg-img flex h-80px mb-42px">
        <!-- <img src="https://m.yuejob.com/images/bg.jpg" class="w-full h-80px absolute z-1" /> -->
        <div
          class="bg-white w-80px h-80px absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1 h-80px w-138px flex flex-center p-1px border-1px border-solid border-[#eee]"
        >
          <img
            :src="companyData?.logoImage ? companyData.logoImage : staticPic"
            class="z-10 max-h-80px max-w-138px"
            style="object-fit: cover"
          />
        </div>
      </div>
      <div class="w-full px-32px pt-16px border-b pb-16px mb-16px flex flex-center flex-col">
        <span class="20px font-bold">{{ companyData?.companyName }}</span>
        <div class="flex flex-wrap w-full flex-center">
          <span
            class="text-14px mt-8px mr-4px"
            v-for="(item, index) in companyData?.companyTradeList"
            :key="item.id"
          >
            <span class="mx-4px" v-if="index !== 0">|</span> {{ item.category1Name }}
          </span>
        </div>
        <!-- <span class="text-14px mt-8px"
          >民营企业<span class="px-8px">|</span>注册资本不详<span class="px-8px">|</span
          >50-200人</span
        > -->
      </div>
      <!-- 福利待遇 -->
      <!-- <div class="flex flex-wrap px-2rem pb-16px">
        <div class="px-8px py-3px bg-primary text-white mr-0.2rem mb-0.2rem">职工社保</div>
      </div> -->
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '公司简介' }}</span>
      </div>
      <div class="px-16px py-16px" v-text="companyData?.companyDesc?.introduction"></div>
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '工商信息' }}</span>
      </div>
      <div class="px-8px mt-16px">
        <div class="mb-8px">
          <span class="font-bold">法定代表人：</span>
          <span>{{ companyData?.legalName }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">成立日期：</span>
          <span>{{ companyData.foundDate }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">公司规模：</span>
          <span>{{ companyData?.companyDesc?.staffNum }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">注册资本：</span>
          <span>{{ companyData?.companyDesc?.capitaMoney }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">经营性质：</span>
          <span>{{
            companyData?.natureType
              ? configStore.getQYJYXSCode.find((item) => item.id === companyData.natureType)?.name
              : ''
          }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">注册地址：</span>
          <span>{{ companyData?.companyAddress }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">统一社会信用代码：</span>
          <span>{{ companyData?.licenseNumber }}</span>
        </div>
        <div class="mb-8px">
          <span class="font-bold">经营范围：</span>
          <span>{{ companyData?.tradeName }}</span>
        </div>
      </div>
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '公司地址' }}</span>
      </div>
      <div class="pt-16px mb-8px">
        <span>{{ companyData.companyAddress }}</span>
      </div>
      <AMap ref="aMapRef"></AMap>
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '联系方式' }}</span>
      </div>
      <div class="w-full flex flex-center pt-16px" v-if="!showPhone">
        <van-button type="primary" @click="getPhone">查看联系方式</van-button>
      </div>
      <div class="flex flex-col pl-16px" v-if="showPhone">
        <div class="pt-16px flex items-center">
          <img
            src="../../assets/image/social/email.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold" v-show="social?.mainEmail">{{
            social?.mainEmail
          }}</span>
        </div>
        <div class="pt-16px flex items-center">
          <img
            src="../../assets/image/social/phone.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold" v-show="social?.mainMobile">{{
            social?.mainMobile
          }}</span>
        </div>
        <div
          class="pt-16px flex items-center"
          v-show="social?.socialNumber?.find((item) => item.type === 'WX')?.value"
        >
          <img
            src="../../assets/image/social/wechat.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold">{{
            social?.socialNumber?.find((item) => item.type === 'WX')?.value
          }}</span>
        </div>
        <div
          class="pt-16px flex items-center"
          v-show="social?.socialNumber?.find((item) => item.type === 'WA')?.value"
        >
          <img
            src="../../assets/image/social/whatsapp.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold">{{
            social?.socialNumber?.find((item) => item.type === 'WA')?.value
          }}</span>
        </div>
        <div
          class="pt-16px flex items-center"
          v-show="social?.socialNumber?.find((item) => item.type === 'LY')?.value"
        >
          <img
            src="../../assets/image/social/lingyin.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold">{{
            social?.socialNumber?.find((item) => item.type === 'LY')?.value
          }}</span>
        </div>
        <div
          class="pt-16px flex items-center"
          v-show="social?.socialNumber?.find((item) => item.type === 'FB')?.value"
        >
          <img
            src="../../assets/image/social/facebook.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold">{{
            social?.socialNumber?.find((item) => item.type === 'FB')?.value
          }}</span>
        </div>
        <div
          class="pt-16px flex items-center"
          v-show="social?.socialNumber?.find((item) => item.type === 'TG')?.value"
        >
          <img
            src="../../assets/image/social/telegram.png"
            class="w-40px h-40px mr-8px object-contain"
          />
          <span class="text-20px font-bold">{{
            social?.socialNumber?.find((item) => item.type === 'TG')?.value
          }}</span>
        </div>
      </div>
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '在招职位' }}</span>
      </div>
      <div class="w-full mt-16px border-x border-b">
        <div
          class="flex flex-center flex-col bg-white py-10px border-t px-10px"
          v-for="node in jobData"
          :key="node.id"
          @click="toPath('/job?id=' + node.id)"
        >
          <div class="grid grid-col-5 w-full mb-5px">
            <div class="col-span-2 font-bold mb-8px">{{ node.jobName }}</div>
            <div class="col-span-1"></div>
            <div class="col-span-2 text-price_red" v-if="node.salaryMin || node.salaryMax">
              <span v-if="node.salaryMin">{{ formatPrice(node.salaryMin) }}</span>
              <span v-if="node.salaryMin && node.salaryMax">-</span>
              <span v-if="node.salaryMax">{{ formatPrice(node.salaryMax) }}</span>
              <span>{{ getCurrency(node.currency)?.name }}</span>
            </div>
            <div class="text-price_red" v-else>面议</div>
          </div>
          <div class="flex items-center justify-between w-full mb-5px">
            <span>
              工作地点:
              <span v-show="node.countryName">{{ node.countryName }}</span>
              <span v-show="node.countryName && node.cityName">-</span>
              <span v-show="node.cityName">{{ node.cityName }}</span>
            </span>
            <span class="text-[14px] text-[#6c757d]">{{ formatShortDate(node.updateDate) }}</span>
          </div>
          <div class="w-full one-row-ellipsis">
            <span>{{ '招聘范围：' }}</span>
            <CountryIcon :countryId="node.countryScope" />
          </div>
          <div class="w-full flex justify-center mt-10px">
            <div class="border border-primary px-10px py-5px rounded-5px">查看并翻译</div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full bg-white mt-8px px-16px py-16px" v-show="goodsData.length > 0">
      <div class="job-divider mt-10px">
        <em></em>
        <span>{{ '产品目录' }}</span>
      </div>
      <div class="flex flex-wrap mt-16px">
        <div
          class="px-8px py-4px border mr-8px rounded-0.2rem"
          v-for="item in categoryData"
          :key="item.categoryId"
          :class="targetCategory === item.categoryId ? 'bg-primary text-white' : ''"
          @click="filterCategory(item.categoryId)"
        >
          {{ item.categoryName }}
        </div>
      </div>
      <div class="flex flex-wrap justify-between mt-16px" v-loading="categoryLoading">
        <div class="flex flex-col flex-center mr-16px" v-for="item in goodsData" :key="item.id">
          <van-image
            width="80px"
            height="80px"
            fit="contain"
            :src="item?.goodsChannelSpuDesc?.mainImages"
          />

          <span class="text-14px text-primary mt-8px">
            ￥
            <span>
              {{ findMarketPriceRange(item.goodsChannelSkuList, 1)?.minPrice }}
            </span>
            <span v-if="!findMarketPriceRange(item.goodsChannelSkuList, 1).flag">
              {{ '-' }}
            </span>
            <span v-if="!findMarketPriceRange(item.goodsChannelSkuList, 1).flag">
              {{ findMarketPriceRange(item.goodsChannelSkuList, 1).maxPrice }}
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onActivated, ref, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCompany, getCompanyPhone } from '@/api/talent'
import staticPic from '@/assets/image/logo.png'
import { useConfigStore } from '@/stores/config'
import { formatPrice, getCurrency } from '@/utils/price'
import { formatShortDate } from '@/utils/data'
import CountryIcon from '@/components/countryIcon.vue'
import AMap from '@/components/gdMap.vue'
import { useUserStore } from '@/stores/user'
import { getCompanyGoods, getCompanyCategory } from '@/api/goods'
import { reactive } from 'vue'
import { findMarketPriceRange } from '@/utils/price'
import { usePermissionStore } from '@/stores/permission'

const permissionStore = usePermissionStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const companyData = ref({})
const jobData = ref([])
const goodsData = ref([])
const categoryData = ref([
  {
    categoryId: null,
    categoryName: '全部',
  },
])
const permission = ref(false)
const categoryLoading = ref(false)
const targetCategory = ref(null)
const social = ref({})
const configStore = useConfigStore()
const aMapRef = ref()
const backToTop = inject('toTop')
const showPhone = ref(false)
const goodsParams = reactive({
  category2Id: null,
  current: 1,
  size: 10,
  sort: null,
  orderBy: null,
  sellerId: route.query.id,
  isMarketable: 2,
})

// 获取权限
const initPermission = () => {
  useUserStore().isLogin.then((res) => {
    if (res) {
      usePermissionStore()
        .getPermissionByCode('YINGPIN')
        .then((result) => {
          permission.value = result
        })
    }
  })
}

const initMap = (id) => {
  getCompany(id).then((res) => {
    if (res.code === 20000) {
      companyData.value = res.data.company
      jobData.value = res.data.jobList
      aMapRef.value.initLongitudeAndLatitude(
        companyData.value.longitude,
        companyData.value.latitude,
        companyData.value.companyAddress,
      )
      initPermission()
    }
  })
}

const init = () => {
  if (route.query?.id) {
    initMap(route.query.id)
    getCompanyCategory(route.query.id).then((res) => {
      if (res.code === 20000) {
        categoryData.value.push(...res.data)
      }
    })
    filterCategory(null)
  }
}

const getPhone = () => {
  userStore.isLogin().then((res) => {
    if (res) {
      if (permission.value) {
        getCompanyPhone(route.query.id).then((res) => {
          if (res.code === 20000) {
            showPhone.value = true
            social.value = res.data
            if (res.data.socialNumber) {
              social.value.socialNumber = JSON.parse(res.data.socialNumber)
            }
          }
        })
      } else {
        showDialog({
          title: '提示',
          message: '您未开通人才链应聘功能，是否前往开通？',
          showCancelButton: true,
        })
          .then(() => {
            // on close
            backToTop()
            router.push('/module?code=YINGPIN')
          })
          .catch(() => {})
      }
    } else {
      showConfirmDialog({
        title: '您未登录',
        message: '请先登录！点击确认前往登录页面',
      })
        .then(() => {
          backToTop()
          router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  })
}

const filterCategory = (id) => {
  targetCategory.value = id
  goodsParams.category2Id = id
  categoryLoading.value = true
  getCompanyGoods(goodsParams)
    .then((res) => {
      if (res.code === 20000) {
        goodsData.value = res.data.records
      }
    })
    .finally(() => {
      categoryLoading.value = false
    })
}

const toPath = (path) => {
  backToTop()
  router.push(path)
}

init()

onActivated(() => {
  init()
})
</script>

<style lang="scss" scoped>
.bg-img {
  background-image: url('https://m.yuejob.com/images/bg.jpg');
}
</style>
